<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>测试题</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
	    body{background: #fff;padding-bottom: 0;}
		.banner_div{height: 1.8rem;position: relative;background-size: 100% 100%;}
		.banner{width: 100%;height: 100%;}
		.test_title{font-size: .3rem;color: #333333;padding: .55rem .3rem .4rem .3rem;line-height: .45rem;}
		.num{display: block;width: .9rem;height: .9rem;line-height: .9rem;text-align: center;font-size: .26rem;color: #666666;position: relative;background: #e5e5e5;border-radius: 50%;margin:0 auto .58rem;}
		.num::before{width: 6rem;content: "";display: block;height: 1px;background: #e5e5e5;position: absolute;left: -3rem;top: 0.45rem;
		-webkit-transform: scale(0.5);
	    transform: scale(0.5);
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    }
		.num::after{width: 6rem;content: "";display: block;height: 1px;background: #e5e5e5;
		position: absolute;left: .9rem;top: 0.45rem;
		-webkit-transform: scale(0.5);
		    transform: scale(0.5);
		     -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;}
	    .optionA{margin-top: .4rem;}
	    .bade{height: .2rem;background: #f4f4f4;}
	    .countDown{width: 2.3rem;height: .5rem;line-height: .5rem;color: #fff;background: #fb597b;font-size: .24rem;text-align: center;position: absolute;top: 0;right: .8rem;border-bottom-left-radius: .2rem;border-bottom-right-radius: .2rem;}
		.count_time{font-size: .24rem;color: #666666;position: absolute;right: 1.29rem;top: .79rem;z-index: 10;}
		.count_time span{font-size: .48rem;color: #333333;font-weight: bold;margin-right: .03rem;}
       .save{width: 4.28rem;height: .90rem;text-align: center;position: fixed;bottom: .33rem;left: 50%;margin-left:-2.14rem;color: #fff;line-height: .90rem;border-radius: .15rem;border:1px solid #fff;font-size: .32rem;background: rgba(0, 0, 0, 0.55);z-index: 100; }
       .popMask_img{width: 100%;display: block;}
       .close_pop{width: .6rem;top: .3rem;left: .3rem;position: fixed;z-index: 100;}
       #dis_scroll{overflow-y: scroll;}
       video{width: 100%;}
       .videoDiv{position: relative;}
       .play_img{position: absolute;width: 1.6rem;z-index: 10;left: 50%;top: 50%;margin-top: -0.8rem;margin-left: -0.8rem;display: none;}
	</style>
</head>
<body>
	<div id="app">

		<div class="mask_layer" id="dis_scroll" v-show="popImg">
			 <img src="img/p_74.png" alt="" class="close_pop" @click="goForward">
		     <img :src="url" alt="" class="popMask_img" v-if="url">
		     <div class="save">长按图片保存 分享到朋友圈</div>
		</div>
		<div class="banner_div" v-bind:style="{backgroundImage: 'url(' +imgUrl+ ')'}"  v-if="media_type!=1">
		 	<img src="img/p_64.png" alt="" class="banner">	
		 	<span class="countDown" v-if="list[0].expire!=-1">本题倒计时</span>
		 	<div class="count_time" v-if="list[0].expire!=-1"><span>{{list[index].expire}}</span>秒</div>
		</div>
		<div v-if="media_type==1" class="videoDiv">
			<img src="img/p_89.png" alt="" class="play_img" @click="playVideo">
			<video id="video" poster="img/p_94.png" :src="imgUrl" preload="auto" autoplay="autoplay" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
		</div>

		<div class="bade"></div>
		<div class="test_title">
			{{list[index].content}}
		</div>
		<span class="num">{{index+1}}/{{list.length}}</span>
		<div class="options">
	        <div class="option">
		        <!-- <div class="optionA">
		         	<div class="optionA_left selected">
		         		<img src="img/p_48.png" alt="">
		         	</div>
		         	<div class="optionA_left">
		         		B
		         	</div>
		         	<div class="optionA_right">
		         	  <span class="text">2017年双十一我的预测是1800亿元，人民币，呵呵</span>
		         	</div>
		        </div> -->
		        <div class="optionA optionB"  v-for="(item,i) in list[index].options" @click="select(index,i)">
		        	<div class="optionA_left selected" v-if="item.selected">
		         		<img src="img/p_48.png" alt="">
		         	</div>
		         	<div class="optionA_left" v-else>
		         		{{item.idx}}
		         	</div>
		         	<div class="optionA_right">
		         	  <span class="text">{{item.content}}</span>
		         	</div>
		        </div>
		        <!-- <div class="optionA optionB">
		         	<div class="optionA_left">
		         		B
		         	</div>
		         	<div class="optionA_right">
		         	  <span class="text">2017年双十一我的预测是1800亿元，人民币，呵呵</span>
		         	</div>
		        </div>
		        <div class="optionA optionB">
		         	<div class="optionA_left">
		         		B
		         	</div>
		         	<div class="optionA_right">
		         	  <span class="text">2017年双十一我的预测是1800亿元，人民币，呵呵</span>
		         	</div>
		        </div> -->
	        </div>
	        
	    </div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
			    list:[
			       {
					"id": 1,
					"title": "title1",
					"content": "content1",
					"expire": 5,
					"options": [
						{
						"id": 1,
						"idx": 1,
						"content": "option_content1"
						},
						{
						"id": 2,
						"idx": 2,
						"content": "option_content2"
						}
					   ]
					},
					{
					"id": 2,
					"title": "title2",
					"content": "content1",
					"expire": 5,
					"options": [
						{
						"id": 1,
						"idx": 1,
						"content": "option_content1"
						},
						{
						"id": 2,
						"idx": 2,
						"content": "option_conten2"
						}
					   ]
					}
			    ],
			    index:0,
			    id:GetQueryString("id"),
			    unionid:GetQueryString("unionid"),
			    token:GetQueryString("token"),
			    imgUrl:"",
			    hmDate:0,
			    timer:null,
			    url:"",
			    disabled:false,
			    popImg:false,
			    dblClick:false,
			    media_type:1,
			    resObj:{}
		        
			},
			mounted(){
				showMenu();
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                var isWindows = /windows|win32/i.test(navigator.userAgent);
                if(isiOS){
                	$(".play_img").show();
                	$("#video").attr('controls', 'controls');
                }
                if(isWindows){
                   $("#video").attr('poster', '');
                }
			    this.getDetail();
			    this.getquestDetail();


			},
			methods: {
				getHm:function(){
                   var myDate=new Date().getTime();
                   return myDate;
				},
				playVideo(){
                    document.getElementById("video").play();
                   $(".play_img").hide();
				},
				select:function(n,m){
					var that=this;
					if(this.disabled){
						return;
					}
					if(this.dblClick){
            			return;
            		}
                    for (var j = 0; j < this.list[n].options.length; j++) {
                        this.list[n].options[j].selected=false;
                    }
                    this.list[n].options[m].selected=true;
                    this.list[n].expire=that.list[that.index].expire;
                   
                    this.list[n].date=that.getHm()-that.hmDate;
                    that.hmDate=that.getHm();

                    this.list=this.list.slice();
                    
                    if(this.index==this.list.length-1){
                    	if(that.timer){
                    		clearInterval(that.timer);
                    	}
                    	that.saveAnswer();
                     	return;
                    }
                    this.disabled=true;
                    that.index++;
                    if(that.list[0].expire!=-1){
	                    if(that.timer){
	                    	clearInterval(that.timer);
	                    	that.count();
	                    }else{
	                    	that.count(); 
	                    }
                	}
                    this.disabled=false;
                },
                goForward:function(){
                	window.location.replace(mainUrl+"/detail.html?id="+this.id+"&unionid="+this.unionid);
                   
                },
                goNext:function(){
                     this.popImg=!this.popImg;
                },
                count:function(){
                	var that=this;
                	var time=100;
                	that.timer=setInterval(function(){
	                	if(that.list[that.index].expire==0){
	                	  clearInterval(that.timer);
	                	  if(that.index==that.list.length-1){
	                	  	that.list[that.index].count=-1;
	                	  	that.saveAnswer();
	                	  	return;
	                	  }
	                	  that.list[that.index].count=-1;
	            		  that.index++;
	            		  that.count();
	            		  return;	 
	            		}
	            		  that.list[that.index].expire--; 
	            	},1000);
                },
				getDetail:function(){
            	   var that=this;
                   ajaxFun("GET","/guess/sub_questions?qid="+this.id,{
                       // q_id:1
                   },function(data){
                      var res=data;
                      if(res.error==0){
                        for (var i = 0; i < res.questions.length; i++) {
                        	res.questions[i].count=0;
                            for (var j = 0; j < res.questions[i].options.length; j++) {
                          	  res.questions[i].options[j].selected=false;
                            }
                        }
                        that.list=res.questions;
                        that.imgUrl=res.img_url;
                        that.media_type=res.media_type;
                        that.hmDate=that.getHm();
                        if(that.list[0].expire!=-1&&res.media_type!=1){
                           that.count();	
                        }
		              
      
                      }else{

                      }
                              
                  }); 
            	},
            	getquestDetail:function(){
                  var that=this;
                  ajaxFun("POST","/get_question",{
                     q_id:this.id,
                     unionid:this.unionid
                  },function(data){
                      var res=data;
                      if(res.code==1){
                      	that.resObj=res.data.question;
                        // that.getShare(that.resObj); 
                      }
                    }); 
                },
                getShare:function(){
                  var that=this;
                  ajaxFun1("POST","/get_guess_share_config",{
                     q_id:this.id,
                     qqq:encodeURIComponent(window.location.href)
                  },function(data){
                    var res=data;
                    console.log(data)
                     if(res.code==1){
                         var config=res.data.config;
                          wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: config.appId, // 必填，公众号的唯一标识
                            timestamp: config.timestamp, // 必填，生成签名的时间戳
                            nonceStr:  config.nonceStr, // 必填，生成签名的随机串
                            signature: config.signature,// 必填，签名，见附录1
                            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                          });
                          var url=that.resObj.share_info.url+that.unionid;
                          var share=shareUrl+encodeURIComponent(httpUrl+url);
                          wx.ready(function(){
                            wx.onMenuShareTimeline({
                                title: that.resObj.share_info.title, // 分享标题
                                link:share, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.resObj.share_info.img, // 分享图标
                                success:function(){
                               
                                  
                                },
                                cancel:function(){

                                }
                            });
                            wx.onMenuShareAppMessage({
                                  title: that.resObj.share_info.title, // 分享标题
                                  desc: that.resObj.share_info.content, // 分享描述
                                  link: share, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                  imgUrl: that.resObj.share_info.img, // 分享图标
                                  type: 'link', // 分享类型,music、video或link，不填默认为link
                                  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                  success: function () { 
                                  
                                    
                                      // 用户确认分享后执行的回调函数
                                  },
                                  cancel: function () { 
                                      // 用户取消分享后执行的回调函数
                                  }
                              });
                          
                          });
                     }
                            
                  });
                },
            	saveAnswer:function(){
            		var that=this;
            		var answers=[];
            		for (var i = 0; i < this.list.length; i++) {
            			var obj={};
            			obj.id=this.list[i].id;
            			if(this.list[i].count==-1){
            				    obj.oid=-1
                                obj.expire=0;
            			}else{
            				for (var j = 0; j < this.list[i].options.length; j++) {
	                        	if(this.list[i].options[j].selected){
	                        	    obj.oid=this.list[i].options[j].id;
	                            }
	                            obj.expire=this.list[i].expire*1000-this.list[i].date+2000;
            			    }
            			}            			
                        answers.push(obj);
            		}
            		if(this.dblClick){
            			return;
            		}
            		this.dblClick=true;
                    ajaxFun("POST","/guess/sub_questions/answer1",{
	                       qid:this.id,
	                       unionid:this.unionid,
	                       token:this.token,
	                       answers:answers
	                    },function(data){
	                      var res=data;
	                      if(res.code==1){
	                      	if(res.url){
	                      		that.goNext();
                                that.url=res.url;
	                      	}else{
	                      	    localStorage.conpou=JSON.stringify(res.coupons);
	                      	    localStorage.mistake=JSON.stringify(res.mistakes);
	                      	    if(res.mistakes.length==0){
                               	 	window.location.href="quiz_result.html?id="+that.id+"&unionid="+that.unionid+"&token="+that.token;   

	                      	    }else{
                               	   window.location.href="quiz_result.html?id="+that.id+"&unionid="+that.unionid+"&rid="+res.result_id+"&token="+that.token;   
	                      	    }
	                      	}
                            
	                      }else{
	                      	 that.dblClick=false;
                             showLayer(res.message);
	                      }
	                    
                   }); 

            	}
			}
		});
	</script>

	
</body>
</html>